<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useClipboard } from '@vueuse/core'
import { useAuthStore } from '@/stores/auth'
import { useConfigStore } from '@/stores/config'
import userApi from '@/apis/user'

//获取一个路由地址
const router = useRouter()
const authStore = useAuthStore()
const configStore = useConfigStore()
const { copy, copied, isSupported } = useClipboard()

const inviteUrl = ref('')
const inviteEnabled = ref(configStore.get('user.invite_enabled'))
const inviteReward = ref(configStore.get('user.invite_reward'))
const logs = ref([])

const copyInviteUrl = async () => {
  if (isSupported.value) {
    await copy(inviteUrl.value)
    if (copied) {
      ElMessage.success('复制成功')
    } else {
      ElMessage.error('复制失败')
    }
  } else {
    ElMessage.warning('您的浏览器不支持复制到剪贴板，请手动复制链接')
  }
}

const getInviteUrl = () => {
  const registerRoute = router.resolve({ name: 'authRegister' })
  const base = window.location.pathname.endsWith('/')
    ? window.location.pathname
    : window.location.pathname + '/'

  //当前地址（包含域名)+路由拼接邀请链接
  return `${window.location.origin}${base}${registerRoute.href}?invite=${authStore.user.invite_code}`
}

const getData = async () => {
  logs.value = (await userApi.invite.logs()).data.data
}

inviteUrl.value = getInviteUrl()

onMounted(async () => {
  await getData()
})
</script>

<template>
  <div class="text-[--el-text-color-primary]">
    <div class="mt-3 mx-3 sm:mx-5 space-y-4">
      <div class="text-xl font-bold">邀请好友</div>
      <div class="text-sm text-[--el-text-color-secondary]" v-if="inviteEnabled">
        将下方邀请链接发送给您的好友，邀请您的好友注册，您将获得{{ inviteReward ?? 0 }}个积分。
      </div>
      <div v-else class="text-sm text-[--el-text-color-secondary]">邀请功能已关闭</div>
    </div>
    <div class="mt-3 mx-3 sm:mx-5 space-y-4" v-if="inviteEnabled">
      <div>
        <el-input v-model="inviteUrl" readonly>
          <template #prepend>
            <span>邀请链接</span>
          </template>
          <template #append>
            <el-button type="primary" size="small" @click="copyInviteUrl">复制</el-button>
          </template>
        </el-input>
      </div>
    </div>
    <div class="mt-5 mx-3 sm:mx-5 space-y-4" v-if="inviteEnabled">
      <div class="space-x-1">
        <FontAwesomeIcon icon="share-alt" />
        <span>邀请记录</span>
      </div>
      <div class="flex flex-wrap gap-4 justify-between sm:justify-start w-full" v-if="logs.length">
        <div class="flex items-center justify-between" v-for="log in logs" :key="log.id">
          <div class="flex items-center space-x-2">
            <div class="w-10 h-10 rounded-full bg-[--el-color-primary]">
              <el-avatar :src="log.invitee.avatar" :size="40" />
            </div>
            <div class="text-sm">
              <div class="font-sm">{{ log.invitee.nickname || log.invitee.username }}</div>
              <div class="text-xs text-[--el-text-color-secondary]">{{ log.create_at }}</div>
            </div>
          </div>
        </div>
      </div>
      <el-empty v-else description="暂无记录" />
    </div>
  </div>
</template>

<style scoped></style>
